<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <h2>{{msg2}}</h2>
      <button @click="fun1('111111')">调用fun1</button>
      <button @click="fun1('2222222')">调用fun1</button>
      <!-- 点击button调用fun1 @click绑定点击事件-->

      <button @click="fun2">改变msg</button>
    </div>
    <div></div>

    <script src="vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#app", //el的意思是vue实例作用的范围
        data: {
          msg: "hello world",
          msg2: "vuevuevue",
        }, //data是数据的意思，在这里可以理解为定义变量的地方

        methods: {
          fun1: function (a) {
            alert(a);
          },
          //定义一个函数fun1

          fun2() {
            this.msg = "world hello";
            this.fun1("3333");
          },
          //在methods方法中使用data数据要加上this
          //数据改变页面内容自动改变
        },
      });
      // 1.新建一个vue实例，实例里的参数是一个对象叫选项对象
      //   el 代表vue实例的作用范围
      //   data代表数据（变量）
      // 2.模版（template）语法
      // 把vue中定义在data里的变量在html中展示 这种语法叫做模版语法 用双大括号展示
      //   3.vue中基本上没有dom操作了，比如说获取节点，添加节点，删除节点这些操作都没有了，而是专注于操作数据

      // 4.第三个选项对象 methods 相当于是函数 方法
    </script>
  </body>
</html>
